<template>
    <ul class="topnav">
        <li><router-link to="/">推荐音乐</router-link></li>
        <li><router-link to="/hot">热歌榜</router-link></li>
        <li><router-link to="/song">歌手榜</router-link></li>
        <li><router-link to="/search">搜索</router-link></li>
    </ul>
</template>
<style lang="less" scoped>
    .topnav{
        display:flex;
        border-bottom:1px solid #f1f2f3;
        margin-bottom: 0px;
        li{
            flex:1;
            text-align:center;
            line-height: 40px;
            a{
                color:#333;
                display: inline-block;
                text-decoration: none;
                font-size: 15px;
                &.router-link-exact-active{
                    color:#dd001b;
                    border-bottom: 2px solid #dd001b;
                }
            }
        }
    }
</style>